<template>
  <div class="column">
    <!--    头部人数    -->
    <div class="no">
      <div class="no-hd">
        <ul>
          <li>{{ visualStore.memberInfoData.total_member }}</li>
          <li>{{ visualStore.memberInfoData.avg_salary }}</li>
        </ul>
      </div>
      <div class="no-bd">
        <ul>
          <li>当前员工人数</li>
          <li>员工平均工资</li>
        </ul>
      </div>
    </div>
    <!--    地图模块    -->
    <div class="map">
      <div class="map1"></div>
      <div class="map2"></div>
      <!--      光点旋转      -->
      <div class="map3"></div>
      <div class="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useVisualStore from "@/store/visualizationModule";
import {onMounted} from "vue";

const visualStore = useVisualStore()
onMounted(async () => {
  await visualStore.requestMemberInfoAction()
})
</script>

<style scoped lang="less">

.no {
  background-color: rgba(101, 132, 226, .1);
  padding: .1875rem;

  .no-hd {
    border: 1px solid rgba(25, 186, 139, .17);
    position: relative;

    ul {
      display: flex;

      li {
        flex: 1;
        line-height: 1rem;
        font-size: 0.875rem;
        color: #ffeb7b;
        text-align: center;
        font-family: "electronicFont", serif;
        position: relative;

        &:first-of-type {
          &::after {
            content: '';
            position: absolute;
            top: 25%;
            right: 0;
            height: 50%;
            width: 1px;
            background-color: rgba(255, 255, 255, .2);
          }
        }
      }
    }

    &::before {
      position: absolute;
      content: "";
      width: 30px;
      height: 10px;
      left: 0;
      top: 0;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }

    &::after {
      position: absolute;
      content: "";
      width: 30px;
      height: 10px;
      right: 0;
      bottom: 0;
      border-right: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
    }
  }

  .no-bd {
    ul {
      display: flex;
      margin-bottom: 0 !important;

      li {
        flex: 1;
        height: .5rem;
        line-height: .5rem;
        font-size: 0.225rem;
        color: rgba(255, 255, 255, .7);
        text-align: center;
        padding-top: 0.125rem;
      }
    }
  }
}

.map {
  height: 10.125rem;
  position: relative;

  .map1 {
    width: 6.475rem;
    height: 6.475rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../../../assets/images/map.png");
    background-size: 100% 100%;
    opacity: .3;
  }

  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.0375rem;
    height: 8.0375rem;
    background: url("../../../assets/images/lbx.png");
    background-size: 100% 100%;
    animation: rotate1 15s linear infinite;
    opacity: .6;
  }

  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.075rem;
    height: 7.075rem;
    background: url("../../../assets/images/jt.png");
    background-size: 100% 100%;
    animation: rotate1 15s linear infinite reverse;
    opacity: .6;
  }

  .chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10.125rem;
  }

  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
}
</style>
